<template>
  <div class="bg">
    <div class="login">
      <div><img src="../assets/headlogo.png" style="width: 100px;height: 100px;"></div>
      <h2>柳东分局</h2>
      <h2 style="margin-bottom: 40px;">智慧公安管理平台</h2>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
               class="demo-ruleForm">
        <el-form-item label="账号" prop="account">
          <el-input v-model="ruleForm.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
              <el-form-item label="验证" prop="code">
                <el-input
                    v-model="ruleForm.code"
                    placeholder="请输入验证码"
                />
                <img class="code" @click="updatecode" title="换一个" :src="code"/>
              </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 200px;height: 42px;" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
<!--      <Vcode-->
<!--          :show="isShow"-->
<!--          @success="onSuccess"-->
<!--      />-->
    </div>
  </div>

</template>
<script>
// 加密
import Vcode from "vue-puzzle-vcode";
import { vcode,login } from '@/api/index'
export default {

  name: 'Login',
  data() {

    return{
      isShow: false,
      code: '',
      ruleForm:{
        account:'',
        password:'',
        code:''
      },
      rules:{
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        code:[
          { required: true, message: '验证码不能为空', trigger: 'blur' },
        ]
      }
    }

  },
  components:{
    Vcode
  },
  created() {
    this.vcode();
  },
  methods: {
    updatecode() {
      this.vcode();
    },
    vcode() {
 vcode().then(res=>{
   console.log(res)
 })
    },
    onSuccess(msg){
      console.log(msg)
   // 通过验证后，需要手动隐藏模态框
          this.isShow = false;
      // this.$router.push('/index')
      // this.$message.success('登录成功')
    },
    submitForm(){
      this.$router.push('/index')
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.isShow = true;
          console.log(this.ruleForm)
           login({
            account: this.ruleForm.account,
            password: this.ruleForm.password,
          }).then(res=>{
            console.log(res,'asas')
              if (res.data==true){
                this.$message.success('登录成功')
                this.$router.push('/index')
              }else {
                this.$message.error("登录失败")
              }
          })
        }else {
          this.$message.error('请输入完整信息')
        }
      })
    },

  },}
</script>

<style rel="stylesheet/scss" lang="scss">
.bg{
  width: 100%;
  height: 100%;
  background:url('../assets/pc_bg.95034ed.png') no-repeat ;
  background-size: 100% 100%;
  position: relative;
}
.login{
  background-color: #e6f1f8;
  position: absolute;
  top: 24%;
  right: 12%;
  border-radius: 20px;
  box-shadow:0 0 5px #ccc;
  text-align: center;
  width:400px;
  height: 500px;
  padding: 40px;

}
.el-form-item__content{
  display: flex;
  justify-content: space-between;
}
.el-form-item{
  margin-bottom: 25px;
}
.code{
  margin-left: 20px;
  display: inline-block;
  border:1px solid #c0c4cc;
  width: 100px;
  height: 40px;
}



</style>

